<template>
  <div>
    <el-tabs v-model="index" :tab-position="tabPosition">
      <el-tab-pane label="基本信息" name="first">
        <BaseViewForm v-if="index === 'first'" :id="editId" ref="baseForm" />
      </el-tab-pane>
      <el-tab-pane label="服务工作量总结" name="second">
        <ServiceSummaryViewForm v-if="index === 'second'" :id="editId" ref="summaryForm" />
      </el-tab-pane>
      <el-tab-pane label="未完成项解释" name="third">
        <UnCompleteViewForm v-if="index === 'third'" :id="editId" ref="unComplete" />
      </el-tab-pane>
      <el-tab-pane label="增值服务" name="fourth">
        <ValueAddedViewForm v-if="index === 'fourth'" :id="editId" ref="valueAddedForm" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseViewForm from './baseViewForm'
import ServiceSummaryViewForm from './serviceSummaryViewForm'
import UnCompleteViewForm from './unCompleteViewForm.vue'
import ValueAddedViewForm from './valueAddedViewForm.vue'

export default {
  name: 'MonthWeeklyEditForm',
  components: {
    BaseViewForm,
    ServiceSummaryViewForm,
    UnCompleteViewForm,
    ValueAddedViewForm
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      tabPosition: 'top',
      index: 'first',
      editId: -1
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.editId = this.id
    },
    immediate: true
  },
  created() {
    this.editId = this.id
    this.index = 'first'
  }
}
</script>
